<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">

    <template>
        <div class="range-wrapper">
            <label>{{label}}</label>
            <el-date-picker
                    v-model="value1"
                    type="date"
                    :editable=false
                    v-bind:disabled="disable"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptionscreate"
                    placeholder="选择日期" @change="change1">
            </el-date-picker>
            <span>至</span>
            <el-date-picker
                    v-model="value2"
                    type="date"
                    :editable=false
                    v-bind:disabled="disable"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptionsend"
                    placeholder="选择日期" @change="change2">
            </el-date-picker>
        </div>
    </template>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
            data() {
                let that = this;
                return {
                  disable:true,
                  props: {
                    label: {
                      type: String
                    },
                  },
                    pickerOptionscreate: {
                        disabledDate(time) { //开始时间的禁用
                            return time.getTime() > new Date(that.value2).getTime();
                        }
                    },
                    //结束时间
                    pickerOptionsend: {
                        disabledDate(time) { //结束时间的禁用
                            return time.getTime() < new Date(that.value1).getTime() - 8.64e7;
                        }
                    },
                    value1: '', //起始时间
                    value2: '', //结束时间
                }
            },
            methods: {
                change1: function () {
                    date[0] = this.value1
                    // date[0] = JSON.stringify(Date.parse(new Date(this.value1)))
                    this.$emit('input', date)
                },
                change2: function () {
                    date[1] = this.value2
                    // date[1] = JSON.stringify(Date.parse(new Date(this.value2)))
                    this.$emit('input', date)
                },
            }

    })
</script>
</body>
</html>